<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:replace="main_layout::html_header(~{::link}, _)">
	<link rel="stylesheet" th:href="@{/lib/DataTables/1.10.15/datatables.min.css}" />
	<link rel="stylesheet" th:href="@{/lib/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.min.css}" />
</head>
 
<body class="hold-transition skin-blue fixed">
<div class="wrapper">

<header class="main-header" th:replace="main_layout::header">
</header>

<aside class="main-sidebar">
	<section class="sidebar" th:replace="main_layout::menu">
	</section>
</aside>

<div class="content-wrapper">
<section class="content-header">
	<h1><a th:href="@{/}">首页</a><small><a th:href="@{/system/user}">用户管理</a></small></h1>
	<div class="breadcrumb">
		<a href="javascript:;" onclick="add_user()" class="btn btn-info btn-sm">新增用户</a>
	</div>
</section>
	
<section class="content">
<div class="box box-info">

<div class="box-header">
	<form class="form-inline" th:action="@{/history/data/export}" id="search_form">
		<div class="form-group">
			<label for="dept"> 部门选择：</label>
			<select name="dept" class="form-control">
				<option value="">全部</option>
				<option th:each="dept: ${depts}" th:value="${dept[0]}" th:text="${dept[1]}"></option>
			</select>
		</div>
		<div class="form-group">
			<label for="name"> 姓名：</label>
			<input type="text" class="form-control" name="name" style="min-width: 160px" />
		</div>
		<div class="form-group">
			<label for="telephone"> 电话号码：</label>
			<input type="text" class="form-control" name="telephone" style="min-width: 160px" />
		</div>
		<div class="form-group">  
			<button type="button" class="btn btn-default" onclick="$('#search_form')[0].reset();">重置</button>
			<button type="button" class="btn btn-primary" onclick="user_table.ajax.reload();">查询</button>
		</div>
	</form> 
</div>
				
<div class="box-body">
  <table class="table table-bordered table-hover" id="user_table">
    <thead>
    <tr>
      <th>编号</th>
      <th>部门</th>
      <th>用户名</th>
      <th>登录名</th>
      <th>职务</th>
      <th>电话</th>
      <th>允许登录</th>
      <th>操作</th>
    </tr>
    <thead>
  </table>
</div>

</div>
</section>
</div>
  
<footer class="main-footer" th:replace="main_layout::footer">
</footer>


<aside class="control-sidebar control-sidebar-light">
    
</aside>

<div class="control-sidebar-bg" ></div>

</div>

<!-- 用户对话框 S -->
<div class="modal fade" id="user_modal" role="dialog">
<div class="modal-dialog modal-lg">
 <div class="modal-content">
 
<div class="modal-header">
	<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
	<h4 class="modal-title" id="user_title">添加部门</h4>
</div>

<div class="modal-body">
<div class="row" style="padding: 0px 20px">

<form action="#" class="form-horizontal" id="user_form">
	<div class="form-group">
		<label for="describe" class="col-sm-2 control-label">编号</label>
		<div class="col-sm-4">
			<input type="text" class="form-control" name="id" readonly="readonly" />
		</div>
		<label for="name" class="col-sm-2 control-label"><span class="title_bt">*</span>姓名</label>
		<div class="col-sm-4">
			<input type="text" class="form-control" name="name" data-rule-required="true" />
		</div>
	</div>

	<div class="form-group">
		<label for="sex" class="col-sm-2 control-label">性别</label>
		<div class="col-sm-4">
			<label class="radio-inline">
				<input type="radio" name="sex" value="1" data-rule-required="true" checked="checked" > 男
			</label>
			<label class="radio-inline">
				<input type="radio" name="sex" value="0" data-rule-required="true" > 女
			</label>
		</div>
		<label for="nation" class="col-sm-2 control-label">民族</label>
		<div class="col-sm-4">
			<input type="text" class="form-control" name="nation" />
		</div>
	</div>
	<div class="form-group">
		<label for="birth" class="col-sm-2 control-label">出生日期</label>
		<div class="col-sm-4">
			<input type="text" class="form-control" name="birth" />
		</div>
		<label for="entryTime" class="col-sm-2 control-label">入职时间</label>
		<div class="col-sm-4">
			<input type="text" class="form-control" name="entryTime" />
		</div>
	</div>
	<div class="form-group">
		<label for="idCard" class="col-sm-2 control-label">身份证号</label>
		<div class="col-sm-4">
			<input type="text" class="form-control" name="idCard" data-rule-isIdCard="true" />
		</div>
		<label for="idNumber" class="col-sm-2 control-label">证件号码</label>
		<div class="col-sm-4">
			<input type="text" class="form-control" name="idNumber" />
		</div>
	</div>
	<div class="form-group">
		<label for="post" class="col-sm-2 control-label"><span class="title_bt">*</span>职务</label>
		<div class="col-sm-4">
			<input type="text" class="form-control" name="post" data-rule-required="true" />
		</div>
		<label for="telephone" class="col-sm-2 control-label"><span class="title_bt">*</span>联系电话</label>
		<div class="col-sm-4">
			<input type="text" class="form-control" name="telephone" data-rule-required="true" data-rule-isMobile="true" />
		</div>
	</div>

	<div class="form-group">
		<label for="value" class="col-sm-2 control-label">所属部门</label>
		<div class="col-sm-4">
			<select name="dept.id" class="form-control" data-rule-required="true">
				<option th:each="dept : ${depts}" th:value="${dept[0]}" th:text="${dept[1]}"></option>
			</select>
		</div>
		<label for="telephone" class="col-sm-2 control-label">电子邮件</label>
		<div class="col-sm-4">
			<input type="text" class="form-control" name="email" data-rule-email="true" />
		</div>
	</div>
	<hr />
	<div class="form-group">
		<label for="username" class="col-sm-2 control-label"><span class="title_bt">*</span>登录名</label>
		<div class="col-sm-4">
			<input type="text" class="form-control" name="username" data-rule-required="true" />
		</div>
		<label for="password" class="col-sm-2 control-label">密码</label>
		<div class="col-sm-4">
			<input type="password" class="form-control" name="password" data-rule-minlength=6 />
		</div>
	</div>
	<div class="form-group">
		<label for="password" class="col-sm-2 control-label">允许登录</label>
		<div class="col-sm-10">
			<label class="radio-inline">
				<input type="radio" name="allowLogin" value="1" data-rule-required="true" checked="checked" > 是
			</label>
			<label class="radio-inline">
				<input type="radio" name="allowLogin" value="0" data-rule-required="true" > 否
			</label>
		</div>
	</div>

</form>
   
</div>
</div>

<div class="modal-footer">
	<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
	<button type="button" class="btn btn-primary" onclick="$('#user_form').submit();">保存</button>
</div>

</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!--用户对话框 E -->

<script th:src="@{/lib/DataTables/1.10.15/datatables.min.js}"></script>
<script th:src="@{/lib/DataTables/datatables.config.js}"></script>
<script th:src="@{/lib/jquery-validation/1.16.0/jquery.validate.min.js}"></script>
<script th:src="@{/lib/jquery-validation/1.16.0/messages_zh.js}"></script>
<script th:src="@{/lib/moment/2.18.1/moment.min.js}"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script th:src="@{/lib/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js}"></script>
<script th:src="@{/lib/bootstrap-datepicker/1.6.4/locales/bootstrap-datepicker.zh-CN.min.js}"></script>
<script>
var user_table, validate;

function add_user() {
	$("#user_title").text("增加用户");
	$("[name='password']").attr('placeholder', '最小6位，如不填为123456');
	$("#user_form").initForm(validate);
	$("#user_modal").modal({backdrop:'static', keyboard: false});
}
function edit_user(id) {
	$("#user_form").initForm(validate);
	$.post("[[@{/system/user/edit}]]", {id: id}, function(ret){
		if(ret) {
			$("#user_title").text("修改用户");
			$("[name='password']").attr('placeholder', '最小6位，如不填保持不变');
			if(ret.birth) ret.birth = moment(ret.birth).format("YYYY-MM-DD");
			if(ret.entryTime) ret.entryTime = moment(ret.entryTime).format("YYYY-MM-DD");
			$("#user_form").setValues(ret);
			$("#user_modal").modal({backdrop:'static', keyboard: false});
		}
	}, "json");
}
function del_user(id, name) {
	$.dialog.confirm("确认删除用户\"" + name + "\"吗？", function(){
		$.post("[[@{/system/user/del}]]", {id: id}, function(ret){
			if(!ret.success) $.dialog.alert(ret.message);
			user_table.ajax.reload();
		}, "json");
	})
}
$(function(){
	$("[name='birth']").datepicker({
		format: 'yyyy-mm-dd',
		language: 'zh-CN'
	});
	$("[name='entryTime']").datepicker({
		format: 'yyyy-mm-dd',
		language: 'zh-CN'
	});
	validate = $("#user_form").validate({
		submitHandler:function(form){
			$.post("[[@{/system/user/save}]]", $("#user_form").serializeArray(), function(ret){
				if(ret.success) {
					$("#user_modal").modal('hide');
					user_table.ajax.reload();
				} else {
					$.dialog.alert(ret.message);
				}
			}, "json");
		}
	});
	
	
	user_table = $('#user_table').DataTable({
		serverSide: true,
		select: false,
		order: [0, 'desc'],
        ajax: {
            url: "[[@{/system/user/list}]]",
            type: 'POST',
            data: function(d){
				d.query = JSON.stringify($("#search_form").serializeArray());
			}
        },
        columnDefs: [
        	{targets: -2,width: "100px",  render: function(data, type, full, meta ) {
            	return	data ? "是" : "否";
            			
            }},
        	{targets: -1, orderable: false,  width: "100px",  className: "align_center", render: function(data, type, full, meta ) {
            	return	"<a href = 'javascript:;' onclick='edit_user(\"" + full[0] + "\")'>修改</a>" + '&nbsp;&nbsp;' +
    			" <a href = 'javascript:;' onclick='del_user(" + full[0] + ",\"" + full[2] + "\")'>删除</a>";
            			
            }}
        ]
	
    });
});
</script>
</body>
</html>
